<template>
  <div>
    <el-form
      ref="dynamicform"
      :label-position="
      queryData.labelPosition ? queryData.labelPosition : 'left'
      "
      :label-width="queryData.labelWidth ? queryData.labelWidth : '80px'"
      :model="props.defaultForm"
      :rules="queryData.rules ? queryData.rules : {}"
      :validate-on-rule-change="false"
      :inline="queryData.inline ? queryData.inline : false"
      :size="queryData.size ? queryData.size : 'default'"
      @submit.native.prevent
    >
      <el-row :gutter="20">
        <el-col
          :span="i.span ? i.span : 24"
          v-for="(i, index) in queryData.query"
          :key="index"
        >
          <!-- input输入框 -->
          <el-form-item
            :label="i.name ? i.name + ':' : ''"
            v-if="i.type == 'input'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :prop="i.prop ? i.prop : ''"
          >
            <el-input
              v-if="!i.trim"
              :class="i.class ? i.class : null"
              :type="i.types ? i.types : 'text'"
              v-model.trim="props.defaultForm[i.prop]"
              :disabled="i.disabled ? i.disabled() : false"
              spellcheck="false"
              clearable
              :maxlength="i.maxlength ? i.maxlength : 50"
              :placeholder="i.placeholder ? i.placeholder : '请输入' + i.name"
            ></el-input>
            <el-input
              v-else
              :class="i.class ? i.class : null"
              :type="i.types ? i.types : 'text'"
              v-model="props.defaultForm[i.prop]"
              :disabled="i.disabled ? i.disabled() : false"
              spellcheck="false"
              clearable
              :maxlength="i.maxlength ? i.maxlength : 50"
              :placeholder="i.placeholder ? i.placeholder : '请输入' + i.name"
            ></el-input>
          </el-form-item>
          <!-- textarea 文本框 -->
          <!-- <el-form-item
            :label="i.name ? i.name + ':' : ''"
            v-if="i.type == 'textarea'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :prop="i.prop ? i.prop : ''"
          >
            <el-input
              v-if="!i.trim"
              :class="i.class ? i.class : null"
              v-model.trim="props.defaultForm[i.prop]"
              :disabled="i.disabled ? i.disabled() : false"
              spellcheck="false"
              clearable
              :maxlength="i.maxlength ? i.maxlength : 50"
              :placeholder="i.placeholder ? i.placeholder : '请输入' + i.name"
            ></el-input>
            <el-input
              v-else
              :class="i.class ? i.class : null"
              v-model="props.defaultForm[i.prop]"
              :disabled="i.disabled ? i.disabled() : false"
              spellcheck="false"
              clearable
              :maxlength="i.maxlength ? i.maxlength : 50"
              :placeholder="i.placeholder ? i.placeholder : '请输入' + i.name"
            ></el-input>
          </el-form-item> -->
          <!-- select下拉框 -->
          <el-form-item
            :label="i.name ? i.name + ':' : ''"
            v-if="i.type == 'select'"
            v-show="
              i.expansion
                ? queryData.expansionVal
                : i.hidden
                ? i.hidden()
                : true
            "
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :prop="i.prop ? i.prop : ''"
          >
            <el-select
              :class="i.class ? i.class : null"
              :style="i.style ? i.style : ' width:100%'"
              v-model="props.defaultForm[i.prop]"
              :disabled="i.disabled ? i.disabled() : false"
              :clearable="i.clearable === 'false' ? false : true"
              filterable
              :placeholder="i.placeholder ? i.placeholder : '请选择' + i.name"
              @change="i.change ? i.change($event) : null"
              @visible-change="i.visibleChange ? i.visibleChange($event) : null"
            >
              <el-option
                v-for="(s, sindex) in i.data"
                :key="sindex"
                :label="
                  i.addLable
                    ? (i.addLableObj.before
                      ? s[i.addLableObj.name] +
                        i.addLableObj.type +
                        s[i.displayVal]
                      : (i.addLableObj.beforeStr
                        ? i.addLableObj.beforeStr+s[i.displayVal] +
                        i.addLableObj.type + s[i.addLableObj.name]
                        :s[i.displayVal] + i.addLableObj.type + s[i.addLableObj.name]
                        )
                      )
                    : s[i.displayVal]
                "
                :value="s[i.value]"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- input>=条件输入框 -->
          <el-form-item
            :prop="i.prop ? i.prop : ''"
            :label="i.name ? i.name + ':' : ''"
            v-if="i.type == 'selectInput'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            style="dispaly:flex"
          >
            <el-select
              :class="i.selectClass ? i.selectClass : null"
              :style="i.selectStyle ? i.selectStyle : 'width:28%'"
              v-model="props.defaultForm[i.selectProp]"
              :placeholder="
                i.selectPlaceholder ? i.selectPlaceholder : '请选择'
              "
              @change="i.change ? i.change($event) : null"
            >
              <el-option
                v-for="(s, sindex) in i.data"
                :key="sindex"
                :label="s[i.displayVal]"
                :value="s[i.value]"
              >
              </el-option>
            </el-select>
            <el-input-number
              v-model="props.defaultForm[i.prop]"
              :min="i.min || i.min === 0 ? i.min : 0.01"
              :max="i.max ? i.max : 10000000"
              :size="i.size ? i.size : 'default'"
              :disabled="i.disabled ? i.disabled : false"
              :style="i.style ? i.style : 'flex:1'"
              :precision="i.precision ? i.precision : i.precision === 0 ? 0 : 0"
              :placeholder="i.placeholder ? i.placeholder : ''"
            ></el-input-number>
          </el-form-item>
          <!-- inputNumber -->
          <el-form-item
            :prop="i.prop ? i.prop : ''"
            :label="i.name ? i.name + ':' : ''"
            v-if="i.type == 'inputNumber'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
          >
            <el-input-number
              v-model="props.defaultForm[i.prop]"
              :min="i.min || i.min === 0 ? i.min : 0.01"
              :max="i.max ? i.max : 10000000"
              :size="i.size ? i.size : 'default'"
              :disabled="i.disabled ? i.disabled : false"
              :style="i.style ? i.style : 'width:100%'"
              :precision="i.precision ? i.precision : i.precision === 0 ? 0 : 0"
              :placeholder="
                i.placeholder ? i.placeholder : i.name ? '请输入' + i.name : ''
              "
            ></el-input-number>
          </el-form-item>
          <!-- 单选框 -->
          <!-- <el-form-item
            :label="i.name + ':'"
            v-if="i.type == 'radio' || i.type == 'radio-button'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :prop="i.prop ? i.prop : ''"
          >
            <ComRadio :item="i" :form="props.defaultForm" />
            <el-tooltip
              v-if="i.showIcon"
              effect="dark"
              content="Left Bottom 提示文字"
              placement="right-end"
            >
              <i class="el-icon-warning-outline"></i>
              <div slot="content" style="width:300px;word-break: break-all;">
                <div>灰色的旗子：代表未做备注。</div>
                <br />
                <div>
                  红色的旗子：代表这个订单有
                  售后问题。注明售后问题和运费的承担方以及处理的进程。格式如：尺码小了，买家自理来回运费换货，收到退件后换成xx款式、颜色、尺码
                  xx备注 日期xx。
                </div>
                <br />
                <div>黄色的旗子：</div>
                <div>
                  1.代表词订单需送礼物，并在备注内容里边写上：“送xxxx ，xx备注”
                </div>
                <div>
                  2.仓库未发货前，尺码、颜色或者地址的更改… 如：尺码更换成L码
                  xx备注
                </div>
                <br />
                <div>绿色的旗子：</div>
                <div>1.代表形色中国和货源网已下单。</div>
                <div>2.刷信誉，并在备注内容里边写上名字，譬如：“AM 城管”。</div>
                <br />
                <div>蓝色的旗子：</div>
                <div>
                  1.代表自己发货的，没有特殊要求，并且要走其他快递。在备注里写“如：发申通/EMS，xx备注”。
                </div>
                <div>
                  2.客人拍了多笔，在备注内容里写：“如：xx件一起发 ，xx备注”
                </div>
                <br />
                <div>
                  紫色的旗子：其他。上面没有包含的情况，如银行汇款等等。
                </div>
              </div>
            </el-tooltip>
          </el-form-item> -->
          <!-- 下划线 -->
          <el-form-item
            :prop="i.prop ? i.prop : ''"
            :label="i.name + ':'"
            v-if="i.type == 'u'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            style="box-sizing:border-box"
          >
            <!-- <u style="">{{form[i.prop]}}</u> -->
            <div style="border-bottom:1px solid #e5e5e5;margin-bottom:-1px">
              {{ props.defaultForm[i.prop] }}
            </div>
          </el-form-item>
          <!-- 省市区 -->
          <!-- <el-form-item
            :label="i.name + ':'"
            v-if="i.type == 'address'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :prop="i.prop ? i.prop : ''"
          >
            <HsAddress ref="hsAddress" :item="i" :form="props.defaultForm" />
          </el-form-item> -->
          <!-- 插旗 -->
          <el-form-item
            :label="i.name + ':'"
            v-if="i.type == 'checkboxs'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :prop="i.prop ? i.prop : ''"
          >
            <el-checkbox
              :size="i.size ? i.size : 'default'"
              style="margin-right:3px; "
              :disabled="i.disabled ? i.disabled : false"
              v-for="opt in i.data"
              :label="i.value ? opt[i.value] : opt.value"
              :key="i.value ? opt[i.value] : opt.value"
            >
              <i
                class="el-icon-s-flag"
                v-if="i.isTag && !i.isAll"
                :style="opt.color ? 'color:' + opt.color : ''"
              >
                {{ i.lable }}</i
              >
              <span v-else>{{
                i.displayVal ? opt[i.displayVal] : opt.label
              }}</span>
            </el-checkbox>
            <el-tooltip
              v-if="i.showIcon"
              effect="dark"
              content="Left Bottom 提示文字"
              placement="right-end"
            >
              <i class="el-icon-warning-outline"></i>
              <div slot="content" style="width:300px;word-break: break-all;">
                <div>灰色的旗子：代表未做备注。</div>
                <br />
                <div>
                  红色的旗子：代表这个订单有
                  售后问题。注明售后问题和运费的承担方以及处理的进程。格式如：尺码小了，买家自理来回运费换货，收到退件后换成xx款式、颜色、尺码
                  xx备注 日期xx。
                </div>
                <br />
                <div>黄色的旗子：</div>
                <div>
                  1.代表词订单需送礼物，并在备注内容里边写上：“送xxxx ，xx备注”
                </div>
                <div>
                  2.仓库未发货前，尺码、颜色或者地址的更改… 如：尺码更换成L码
                  xx备注
                </div>
                <br />
                <div>绿色的旗子：</div>
                <div>1.代表形色中国和货源网已下单。</div>
                <div>2.刷信誉，并在备注内容里边写上名字，譬如：“AM 城管”。</div>
                <br />
                <div>蓝色的旗子：</div>
                <div>
                  1.代表自己发货的，没有特殊要求，并且要走其他快递。在备注里写“如：发申通/EMS，xx备注”。
                </div>
                <div>
                  2.客人拍了多笔，在备注内容里写：“如：xx件一起发 ，xx备注”
                </div>
                <br />
                <div>
                  紫色的旗子：其他。上面没有包含的情况，如银行汇款等等。
                </div>
              </div>
            </el-tooltip>
          </el-form-item>

          <!-- 单选框插旗 -->
          <el-form-item
            :label="i.name + ':'"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            v-if="i.type == 'radioFlag'"
            v-show="i.expansion ? queryData.expansionVal : true"
          >
            <el-radio-group v-model="props.defaultForm[i.prop]">
              <el-radio label="">全部</el-radio>
              <el-radio :label="j.value" v-for="j in i.data" :key="j.value">
                <i :style="{ color: j.color }" class="el-icon-s-flag"></i
              ></el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 单个文本 -->
          <el-form-item
            :label="i.name + ':'"
            v-if="i.type == 'text'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :prop="i.prop ? i.prop : ''"
          >
          </el-form-item>
          <!-- 单个复选框 -->
          <el-form-item
            :label="i.name + ':'"
            v-if="i.type == 'checkbox'"
            v-show="i.expansion ? queryData.expansionVal : true"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :prop="i.prop ? i.prop : ''"
          >
            <el-checkbox
              v-model="props.defaultForm[i.prop]"
              :true-label="i.trueLabel ? i.trueLabel : 1"
              :false-label="i.falseLabel ? i.falseLabel : 0"
              >{{ props.defaultForm[i.name] }}</el-checkbox
            >
          </el-form-item>
          <!-- cascader -->
          <!-- <el-form-item
            :label="i.name ? i.name + ':' : ''"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :size="i.size || 'default'"
            v-show="i.expansion ? queryData.expansionVal : true"
            v-if="i.type == 'cascader'"
          >
            <HsCascader
              :item="i"
              :form="props.defaultForm"
              :style="i.style ? i.style : 'width:100%'"
            />
          </el-form-item> -->
          <el-form-item
            :label="i.name ? i.name + ':' : ''"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :size="i.size || 'default'"
            v-if="i.type == 'dateTime'"
            v-show="i.expansion ? queryData.expansionVal : true"
          >
            <el-date-picker
              :class="i.class ? i.class : null"
              :style="i.style ? i.style : 'width:100%'"
              :disabled="i.disabled ? i.disabled() : false"
              v-model="props.defaultForm[i.prop]"
              type="datetime"
              :value-format="
                i.valueFormat ? i.valueFormat : 'yyyy-MM-dd HH:mm:ss'
              "
              :placeholder="i.placeholder ? i.placeholder : '选择开始日期'"
              @change="
                i.$event && i.$event.change
                  ? i.$event.change(e, i.prop, props.defaultForm)
                  : null
              "
            />
          </el-form-item>
          <!-- 日期选择器 -->
          <el-form-item
            :label="i.name + ':'"
            v-if="i.type == 'picker'"
            v-show="i.expansion ? queryData.expansionVal : true"
          >
            <div style="width:100%;display: flex">
              <el-date-picker
                :class="i.class ? i.class : null"
                v-model="props.defaultForm[i.prop[0]]"
                type="datetime"
                placeholder="选择开始日期"
                @change="datePicker($event, i.prop[0], i.format)"
              >
              </el-date-picker>
              <el-date-picker
                :class="i.class ? i.class : null"
                v-model="props.defaultForm[i.prop[1]]"
                type="datetime"
                placeholder="选择结束日期"
                @change="datePicker($event, i.prop[1], i.format)"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <!-- 时间选择器 -->
          <el-form-item
            :label="i.name ? i.name + ':' : ''"
            :label-width="i.labelWidth ? i.labelWidth : ''"
            :size="i.size || 'default'"
            v-if="i.type == 'datetimerange' || i.type == 'daterange'"
            v-show="i.expansion ? queryData.expansionVal : true"
            class="datetimerangeBox"
          >
            <div style="width:100%;display: flex">
              <el-date-picker
                v-model="props.defaultForm[i.prop]"
                :type="i.type ? i.type : 'datetimerange'"
                :style="i.style ? i.style : 'width:100%;'"
                :clearable="i.clearable == 'false' ? false : true"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="
                  i.defaultTime ? i.defaultTime :defaultTime
                "
                :default-value="
                  i.defaultValue ? i.defaultValue : []
                "
                :shortcuts="
                  i.pickerOptions&&i.pickerOptions.shortcuts ?i.pickerOptions.shortcuts :pickerOptions.shortcuts
                "
                :format="
                  i.format ? i.format : 'YYYY-MM-DD HH:mm:ss'
                "
                :value-forma="
                  i.valueFormat ? i.valueFormat : 'YYYY-MM-DD HH:mm:ss'
                "
                @change="i.$events&&i.$events.change ?i.$events.change($event, props.defaultForm):null"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="props.btns&&props.btns.length > 0" style="text-align:right;width:100%">
      <Buttons v-model:btns="props.btns" :allBtnPermission="true"></Buttons>
    </div>
  </div>
</template>

<script setup name="HsQuery">
import moment from "moment";
import { ref, toRefs, toRef } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  queryData: {
    type: Object,
    default: () => {
      return {};
    },
  },
  defaultForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
  btns: {
    type: Array,
    default: () => {
      return [];
    },
  },
})
// const emits = defineEmits();
const pickerOptions = ref({
  shortcuts: [
    {
      text: '近一周',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: '近一月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: '近三月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
    
  ]
});

const defaultTime= [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
] 
function datePicker(val, prop, format) {
  console.log(val, prop, format);
  // props.defaultForm[prop] = moment(val).format(format);
}
// watch(props.defaultForm, (value) => {
//   console.log("defaultForm", value);
//   form = value;
// })
let dynamicform=ref(proxy.$refs["dynamicform"])
function resetForm(){
  dynamicform.value.resetFields()
} 
defineExpose({
  // validateForm,
  dynamicform,
  resetForm
});
</script>

<style lang="scss" scoped>
.btn {
  margin-left: 20px;
}
:deep(.el-select.el-select--default.select) {
  width: 100%;
}
.datePicker {
  width: 100%;
}
:deep(.el-cascader.el-cascader--default) {
  width: 100%;
  .el-input.el-input--default.el-input--suffix {
    width: 100%;
  }
}
// :deep(.el-form-item--default.el-form-item) {
//   margin-bottom: 10px;
// }
:deep(.el-form-item__label){
  font-weight: 500;
}
.upIcon {
  transform: rotate(90deg);
  cursor: pointer;
  &.large {
    font-size: 20px;
  }
}
.icon {
  cursor: pointer;
}
:deep(label.el-radio) {
  margin-right: 5px;
}
</style>
